<template>
  <a-modal
    v-model="isModalVisible"
    :mask-closable="false"
    title="编辑有序顺序"
    class="merge-column"
    cancel-text="取消"
    ok-text="确定"
    @ok="onConfirm"
    @cancel="onCancel"
  >
    <div class="mode-box">
      <draggable
        :list="myList"
        :disabled="!enabled"
        class="list-group"
        ghost-class="ghost"
        @start="dragging = true"
        @end="dragging = false"
      >
        <div
          v-for="(element, index) in myList"
          :key="element + index"
          class="list-group-item"
        >
          {{ element }}
        </div>
      </draggable>
    </div>
    <div class="prompt-information">提示： 拖动改变顺序</div>
  </a-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import draggable from 'vuedraggable'
import { apiQueryOrder } from '@/api/data-clean'

@Component({
  components: {
    draggable,
  },
})
export default class EditOrder extends Vue {
  @Prop() column!: any
  @Prop() editData!: any
  @Prop() taskId!: string
  @Prop() requestParams: any

  private isModalVisible: boolean = true

  public enabled: boolean = true

  public myList: any[] = []

  private drag: boolean = false

  public get dragOptions() {
    return {
      animation: 0,
      group: 'description',
      disabled: false,
      ghostClass: 'ghost',
    }
  }

  mounted() {
    this.getOrder({
      taskId: this.taskId,
      col: this.requestParams.name,
      table: this.requestParams.table,
    })
  }

  /**
   * 获取有序序列
   */
  private async getOrder(parameters?: any) {
    const response = await apiQueryOrder({
      data: {
        ...parameters,
      },
    })
    if (response.data.code === 100) {
      this.myList = response.data.result
    } else {
      this.$message.error(response.data.message)
    }
  }

  /* 确定 */
  public onConfirm() {
    // 如果是其他语义转换为有序语义，确认编辑
    this.$emit('confirm-order', { flag: 'confirm', order: this.myList })
  }

  /**
   * 没有用到历史记录，直接重新获取排序顺序
   */
  @Watch('editData', { immediate: true, deep: true })
  private async onCurrentHistory(newValue: any) {
    console.log(newValue)
    // this.isModalVisible = true
    // this.getOrder(
    //   {
    //     taskId: this.taskId,
    //     col: this.requestParams.name,
    //     table: this.requestParams.table
    //   }
    // )
  }

  onCancel() {
    this.isModalVisible = false
    this.$emit('confirm-order', { flag: 'cancel' })
  }
}
</script>

<style lang="less" scoped>
.mode-box {
  max-height: 350px;
  overflow-y: auto;
}

.list-group-item {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  cursor: move;
  display: block;
  margin-bottom: -1px;
  padding: 0.5rem 1rem;
  position: relative;
}

.ghost {
  background: #c8ebfb;
  opacity: 0.5;
}

.prompt-information {
  color: #9b9da8;
  font-size: 14px;
  height: 28px;
  line-height: 28px;
  margin-top: 6px;
}
</style>
